<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }

            ul {
                width: 600px;
                height: 800px;
                border: 10px red solid;
                /* 将ul设置为一个弹性容器 */
                display: flex;

                /* flex-direction: column; */

                /* 
                  flex-wrap:
                    设置弹性元素是否再弹性容器中自动换行
                    可选值:
                      nowrap 默认值.元素不会自动换行
                      wrap   元素沿着辅轴方向自动换行
                      wrap-reverse 元素沿着辅轴反方向换行
                */
                /* flex-wrap: wrap-reverse; */

                /* 
                  flex-flow: wrap 和direction的简写属性
                */
                flex-flow: row wrap;

                /* 
                  justify-content
                    - 如果分配主轴上的空白空间(主轴上的元素如何排列)
                    - 可选值:
                        flex-start 元素沿着主轴起边排列
                        flex-end 元素沿着主轴终边排列
                        center 元素居中排列
                        space-around 空白分布元素两侧
                        space-evenly 空白分布到元素的单侧
                        space-between 空白均匀分配到元素件
                */
                /* justify-content: space-evenly; */

                /* 
                  align-items:
                    - 元素在辅轴上如何对齐
                    - 元素间的关系
                      - 可选值
                        stretch 默认值,将元素设置为相同的长度
                        flex-start 元素不会拉伸,沿着辅轴起边对齐
                        flex-end 沿着辅轴的终边对齐
                        center 居中对齐
                */

                justify-content: center;
                align-items: flex-end;

                /* align-content: 辅轴空白空间的分布 */
                align-content: center;
            }

            li {
                width: 100px;
                height: 100px;
                background-color: #bfa;
                font-size: 50px;
                text-align: center;
                line-height: 100px;
                flex-direction: 0;
            }

            li:nth-child(2) {
                background-color: pink;
            }

            li:nth-child(3) {
                background-color: orange;
            }

            li:nth-child(4) {
                background-color: yellow;
            }

            li:nth-child(5) {
                background-color: chocolate;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>
                2
                <div>2</div>
            </li>
            <li>
                3
                <div>3</div>
                <div>3</div>
            </li>

            <li>1</li>
            <li>
                2
                <div>2</div>
            </li>
        </ul>
    </body>
</html>
